<script setup>
import {useCounterStore} from '../stores/counter'
import {ref} from 'vue'
const head=useCounterStore()
const currentIndex=ref(0)
const swip=ref(null)
const ind=(index)=>{
  currentIndex.value=index
  swip.value.setActiveItem(currentIndex.value)
}
</script>
<template>
<!-- 轮播图 -->
<div class="content-swipe">
    <div class="content-swipe-left">
      <ul>
        <li v-for="(item,index) in head.header" :key="item">
            <div>
              <span>{{item.name}}</span> 
              <span v-for="(item1,index1) in item.children">{{index1<=1?item1.name:''}}</span>
            </div>
            <div>
              <span>></span>
            </div>
        </li>
      </ul>
    </div>
    <div class="content-swipe-right">
      <div class="block text-center">
        <el-carousel ref="swip" height="500px" :autoplay="false" arrow="never" indicator-position="none">
          <el-carousel-item v-for="(item,index) in head.bannerList" :key="item" >
            <img :src="item.imgUrl">
          </el-carousel-item>
        </el-carousel>
        <div class="indicator">
          <div v-for="(item,index) in head.bannerList" :key="item" :class="{'indicator-item-up':index===currentIndex}" @click="ind(index)">
            <div class="indicator-item"></div>
          </div>
        </div>
      </div>
    </div>
   </div>
   <div>

    <!-- 新鲜好物 -->
    <div class="new">
        <div class="new-title">
          <div>
            <span class="new-title-text-big">新鲜好物</span>
            <span class="new-title-text" style="margin-left: 35px;">新鲜出炉 品质靠谱</span>
          </div>
          <div>
            <span class="new-title-text" style="margin-right: 10px;">查看全部</span><span style="color: #A1A1A1;" class="iconfont icon-arrow-right-bold"></span>
          </div>
        </div>
        <div class="new-bottom">
            <div v-for="(iteam,index) in head.newList" :key="item" class="new-bottom-list">
              <img :src="iteam.picture" width="304" height="304">
              <div class="new-bottom-text">
                <div>{{iteam.name}}</div>
                <div><span>￥</span>{{iteam.price}}</div>
              </div>
            </div>
        </div>
    </div>
    <!-- 人气推荐 -->
    <div class="new">
      <div class="new-title">
        <div>
          <span class="new-title-text-big">人气推荐</span>
          <span class="new-title-text" style="margin-left: 35px;">人气爆款 不容错过</span>
        </div>
      </div>
      <div class="new-bottom">
          <div v-for="(item,index) in head.hotList" :key="item" class="new-bottom-list">
            <img :src="item.picture" width="304" height="304">
            <div class="new-bottom-text" style="background-color: white;">
              <div>{{item.title}}</div>
              <div style="font-family: PingFangSC-Regular;font-size: 16px;color: #A1A1A1;letter-spacing: 0;text-align: center;font-weight: 400;">{{item.alt}}</div>
            </div>
          </div>
      </div>
  </div>

  <!-- 热门品牌 -->
  <div class="new" style="background: #F5F5F5;">
    <div class="new-title">
      <div>
        <span class="new-title-text-big">热门品牌</span>
        <span class="new-title-text" style="margin-left: 35px;">国际经典 品质认证</span>
      </div>
      <div class="new-title-lg">
        <img src="../assets/images/left.png" style="margin-right: 15px;"><img src="../assets/images/right.png" >
      </div>
    </div>
    <div class="new-bottom">
        <div v-for="(item,index) in head.brandList" :key="item" class="brandlist">
          <img :src="item.picture" width="244" height="306">
        </div>
    </div>


<!-- 二级分类 -->
<div class="new" style="" v-for="(item,index) in head.goodsList" :key="item.id">
  <div class="new-title">
    <div>
      <span class="new-title-text-big">{{item.name}}</span>
    </div>
    <div class="classify">
      <ul>
        <li><a href="#">热门</a></li>
        <li v-for="item1 in item.children" :key="item1.id"><a href="#">{{item1.name}}</a></li>
      </ul>
      <span class="new-title-text" style="margin-right: 10px;">查看全部</span><span style="color: #A1A1A1;" class="iconfont icon-arrow-right-bold"></span>
    </div>
  </div>
  <div class="classify-bottom">
      <div class="classify-bottom-left">
        <img :src="item.picture" width="260" height="600">
      </div>
      <div class="classify-bottom-right">
        <div class="classify-bottom-right-item" v-for="item2 in item.goods" :key="item2.id">
          <div>
            <img :src="item2.picture">
          </div>
          <div>{{item2.name}}</div>
          <div><span>￥</span><span>{{item2.price}}</span></div>
        </div>
      </div>
  </div>
</div>

<!-- 最新专题 -->
<div class="new" v-if="false">
<div class="new-title">
  <div>
    <span class="new-title-text-big">最新专题</span>
  </div>
  <div>
    <span class="new-title-text" style="margin-right: 10px;">查看更多</span><span style="color: #A1A1A1;" class="iconfont icon-arrow-right-bold"></span>
  </div>
</div>
<div class="new-bottom">
    <div v-for="item in 3" :key="item" class="new-bottom-list">
        <div class="new-bottom-list-zhuanti">
          <img src="./assets//images/最新专题1.png" width="405" height="288">
          <div class="new-bottom-list-zhuanti-alt">
            <div>
              <span>吃这些美食才不算辜负自己</span><br/>
              <span>餐厨起居洗护好物</span>
            </div>
            <div>
              <span>￥</span>29.9起
            </div>
          </div> 
          <div class="new-bottom-list-zhuanti-bottom">
            <div class="new-bottom-list-zhuanti-bottom-left">
              <div class="new-bottom-list-zhuanti-bottom-left-item">
                <span class="iconfont icon-favorites-fill
" style="color: #aa2113;"></span>
              <div>1220</div>
              </div>
              <div class="new-bottom-list-zhuanti-bottom-left-item">
                <span class="iconfont icon-browse
"></span>
              <div>1800</div>
              </div>
            </div>
            <div class="new-bottom-list-zhuanti-bottom-right">
              <span class="iconfont icon-comment
"></span>
              <div>246</div>
            </div>
          </div>
        </div>
    </div>
</div>
</div>
  </div>
</div>
</template>
<style lang="scss">
.el-carousel__item:nth-child(2n) {
    background-color: #99a9bf;
  }
  
  .el-carousel__item:nth-child(2n + 1) {
    background-color: #d3dce6;
  }
  .content-swipe{
    width: 1240px;
    height: 500px;
    margin: 0 auto;
    position: relative;
    .content-swipe-left{
      width: 250px;
      height: 100%;
      position: absolute;
      z-index: 1;
      background: rgba(0,0,0,.62);
      ul{
        width: 100%;
        font-size: 20px;
        color: white;
        position: absolute;
        z-index: 100;
        li{
          padding-left: 29px;
          height: 50px;
          line-height: 50px;
          display: flex;
          justify-content: space-between;
          &:hover{
            background-color: #00BE9A;
          }
          span{
            font-size: 14px;
            color: #FFFFFF;
            letter-spacing: 0;
            text-align: left;
            font-weight: 500;
            &:first-child{
              font-size: 16px;
              line-height: 22px;
            }
            &:nth-child(2){
              padding-left: 14px;
            }
            &:nth-child(3){
              padding-left: 5px;
            }
            &:last-child{
              padding-right: 10px;
            }
          }
        }
      }
    }
    .content-swipe-right{
      width: 100%;
      height: 100%;
      position: relative;
      .indicator{
        width: 80px;
        height: 22px;
        position: absolute;
        right: 14px;
        bottom: 17px;
        display: flex;
        align-items: center;
        justify-content: space-around;
        .indicator-item-up{
          width: 22px;
          height: 22px;
          background: rgba(255,255,255,0.50);
          border-radius: 50%;
          display: flex;
          align-items: center;
          justify-content: center;
        }
        .indicator-item{
          width: 14px;
          height: 14px;
          background: rgba(255,255,255,0.50);
          border-radius: 50%;
          
        }
      }
    }
  }
  .new{
    width: 100%;
    min-height: 500px;
    background-color: white;
    .classify{
      display: flex;
      ul{
        display: flex;
        font-size: 16px;
        color: #333333;
        letter-spacing: 0;
        font-weight: 400;
        li{
          margin-right: 13px;
          &:first-child{
            color: #FFFFFF;
            padding:0 7px;
            background: #00BE9A;
          }
          &:last-child{
            margin-right: 65px;
          }
        }
      }
    }
    .new-title{
      width: 1240px;
      height: 112px;
      margin: 0 auto;
      display: flex;
      justify-content: space-between;
      align-items: center;
      position: relative;
        .new-title-text{
        font-weight: 400;
        font-size: 16px;
          color: #A1A1A1;
        
      }
      .new-title-lg{
        position: absolute;
        right: 5px;
        bottom: 15px;
      }
      .new-title-text-big{
        font-weight: 400;
        font-size: 30px;
        color: #333333;
      }
    }
    .new-bottom{
      width: 1240px;
      height: 404px;
      margin: 0 auto;
      display: flex;
      .new-bottom-list{
        margin-left: 8px;
        &:first-child{
          margin-left: 0;
        }
        .new-bottom-list-zhuanti{
          position: relative;
          .new-bottom-list-zhuanti-alt{
            width: 92%;
            position: absolute;
            left: 0;
            bottom: 77px;
            z-index: 1;
            font-size: 20px;
            color: #FFFFFF;
            font-weight: 400;
            display: flex;
            justify-content: space-between;
            margin-left: 15px;
            div{
              &:first-child{
                span{
                  &:first-child{
                    width: 270px;
                  }
                  &:last-child{
                    font-size: 16px;
                    color: #FFFFFF;
                  }
                }
              }
              &:last-child{
                width: 79px;
                height: 25px;
                font-size: 18px;
                color: #AA2113;
                margin-top: 15px;
                background: #FFFFFF;
              }
            
            }
            
          }
          .new-bottom-list-zhuanti-bottom{
            width: 405px;
            height: 67px;
            display: flex;
            padding: 0 15px;
            font-size: 16px;
            color: #666666;
            justify-content: space-between;
            align-items: center;
            .new-bottom-list-zhuanti-bottom-left{
                width: 200px;
                display: flex;
                .new-bottom-list-zhuanti-bottom-left-item{
                  display: flex;
                  &:last-child{
                    margin-left: 15px;
                  }
                }
            }
            .new-bottom-list-zhuanti-bottom-right{
              display: flex;
            }
          }
        }
      }

      .new-bottom-text{
        width: 304px;
        height: 100px;
        background: #EEF9F4;
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        div{
          &:first-child{
            font-family: PingFangSC-Regular;
            font-size: 20px;
            color: #333333;
            letter-spacing: 1px;
            text-align: center;
            font-weight: 400;
          }
          &:last-child{
            font-family: PingFangSC-Regular;
            font-size: 22px;
            color: #AA2113;
            letter-spacing: 1.1px;
            line-height: 31px;
            font-weight: 400;
            span{
              font-size: 18px;
              color: #AA2113;
            }
          }
        }
      }
    }
  }

.brandlist{
  width: 244px;
  padding-right: 5px;
}
.classify-bottom{
  width: 1240px;
  min-height: 400px;
  margin: 0 auto;
  display: flex;
  .classify-bottom-left{
    width: 350px;
  }
  .classify-bottom-right{
    width: 100%;
    margin-left: 60px;
    display: grid;
    grid-template-columns: 1fr 1fr 1fr 1fr;
    gap: 35px;
    .classify-bottom-right-item{
      div{
        font-weight: 400;
        &:nth-child(2){
          width: 200px;
          height: 57px;
          font-size: 16px;
          color: #333333;
          padding: 10px 0;
        }
        &:nth-child(3){
          font-size: 22px;
          span{
            font-size: 22px;
            color: #AF2F22;
            &:first-child{
              font-size: 16px;
            }
          }
        }
      }
    }
  }
}
</style>